<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button type="button" id="b1">按钮1</button>
		<button type="button" id="b2">按钮2</button>
		<script src="../js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			let obj = {
				id: 1,
				name: "haha",
				age: 20
			}
			//传统的
			console.log(obj.name);
			console.log(obj["age"]);
			//解构，使用场景主要在对复杂的对象简化，一般用于Ajax的结果解析
			//obj1是对象中的属性名称，t：该属性名称的别名
			let {
				obj1: t
			} = {
				id: 1,
				obj1: {
					obj2: {
						name: "haha"
					}
				},
				age: 20
			}
			// console.log(nobj.obj1.obj2.name);
			console.log(t.obj2.name);

			function add([x, y]) {
				console.log(this);
				return x + y;
			}

			let t1 = {
				x: 1,
				y: 2
			}

			let t2 = [1, 2];

			console.log(add([t1.x, t1.y]));
			console.log(add(t2));

			console.log([1, 2, 3, 4, 5].copyWithin(1, 3))

			/**
			 * 箭头函数一般用于匿名函数比较
			 * 箭头函数：目的为了方便使用，但是会带了一个this关键的指向问题
			 * 在JS中，普通函数中this表示当前执行对象
			 * 在箭头函数中，如果当前没有对象，则指向上一级
			 * 
			 */
			let sub = () => {
				console.log(this);
				console.log("sub箭头函数")
			}
			let sub1 = x => {
				console.log(this);
				console.log("sub1箭头函数", x)
			}
			let sub2 = (x, y) => {
				console.log(this);
				console.log("sub2箭头函数", x, y)
			}

			sub();
			sub1(2);
			sub2(3, 4);
			$(function() {
				$("#b1").click(() => {
					console.log(this);
					console.log("按钮被点击了")
				})
				$("#b2").click(function() {
					console.log(this);
					console.log("按钮被点击了")
				})
			})
		</script>
	</body>
</html>
